<template>
	<div class="view">
		<div class="page-statistics">
			<div class="m-header">
				<div class="name">{{scenceInfo.scenicName ? scenceInfo.scenicName:''}}</div>
				<div class="right_box">
					<span>{{scenceInfo.className ? scenceInfo.className :''}}</span>
					<span>参与人数：{{scenceInfo.classUserAllCallNum ? scenceInfo.classUserAllCallNum :0 }}人</span>
				</div>
			</div>
			<div class="m-con">
				<div class="list">
					<div class="list-item" v-for="(item,index) in list" :key="'index' +index" @click="jumpPass(item)">
						<div class="order">{{index +1}}</div>
						<img class="Img" :src="item.userAvatar ? item.userAvatar:headError" alt="" :onerror="headError">
						<div class="name">{{item.trueName}}</div>
						<div :class="['num',{'on':item.checkState != 0}]" >{{item.checkState == 0?'去':'已'}}审核</div>
					</div>
				</div>
					<div class="vTips_empty" v-if="!list || !list.length">暂无数据</div>
			</div>
		</div>
	</div>
</template>

<script>
import * as api from "@/api/index";
export default {
	data(){
		return {
			headError: this.$store.state.headError,
			scenceInfo:{},
			list:[]
		}
	},
	created(){
		this.getInit()
	},
	methods: {
		getInit(){
			var scenceObj = sessionStorage.getItem('scenceInfo');
			if(!scenceObj){
				this.$router.push({ path: '/scence/scenceListT'})
				return false
			}
			this.scenceInfo = scenceObj?JSON.parse(scenceObj):{}
			this.getList()

		},
		async getList(){
			let data ={
				classId :this.scenceInfo.classId,
				scenicId: this.scenceInfo.scenicId,
				futureId: this.scenceInfo.futureId
			}
			var res=await api.getListByScenicId(data)

			if(res.resultCode==1){
				this.list = res.value?res.value:[]
			}
		},
	
		jumpPass(item){
			this.$router.push({
				path: '/scence/reviewPageT',
				query:{
					scenicUserId:item.scenicUserId,
				}
			})	
		},
		
	},
}
</script>

<style lang="scss" scoped>
.page-statistics{
	padding: 0.3rem 0.4rem;
}
.m-header {
	height: 1.5rem;
	font-size: 0.45rem;
	color: #05b3b6;
	border-bottom: 0.05rem dotted #e6eedb;
	font-weight: bold;
	.name{
		padding-left: 0.2rem;
		width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.right_box {
		display: flex;
		margin-top: 0.2rem;
		font-size: 0.28rem;
		span{
			padding-left: 0.2rem;
		}
	}
}
.m-con {
	padding: 0 0 2.4rem 0;
	width: 100%;
	.list{
		flex: 1;
		overflow: auto;
	}
	.list-item {
		display: flex;
		height: 1rem;
		align-items: center;
		line-height: 1rem;
		text-align: center;
		font-size: 0.36rem;
		color: #333333;
		padding-right: .2rem;
		.order {
			color: #05b3b6;
			font-size: 0.32rem;
			width: .5rem;
			text-align: center;
		}
		.Img {
			width: 0.6rem;
			height: 0.6rem;
			border-radius: 0.3rem;
			margin-left: 0.4rem;
		}
		.name {
			flex: 1;
			text-align: left;
			margin-left: 0.4rem;
		}
		.num {
			width: 1.4rem; height: .56rem; line-height: .52rem;
			border-radius: .56rem;
			background: #05b3b6;
			border: .02rem solid #05b3b6;
			color: #fff;
			font-size: .3rem;
			&.on{
				color: #05b3b6;
				background: #fff;
			}
		}
	}
}
</style>